<template>
  <div class="app-container">

    <div class="filter-container">
      <el-button class="filter-item" type="primary" icon="el-icon-refresh" @click="  getList()">刷新菜单
      </el-button>
      <el-button class="filter-item" type="success" icon="el-icon-refresh" @click="changeExpandState()">
        展开|折叠
      </el-button>
      <el-button class="filter-item" type="primary" icon="el-icon-plus" @click="handleCreate(null)">新增一级菜单
      </el-button>
      <!-- <el-tag style="margin-bottom:20px;">
          <a href="https://github.com/PanJiaChen/vue-element-admin/tree/master/src/components/TreeTable" target="_blank">Documentation</a>
        </el-tag> -->
    </div>

    <tree-table :data="treeTableDataList" :columns="columns"
                :expand-all="expandAll" :listLoading="listLoading" border ref="menuTree">
      <el-table-column label="操作" width="300" align="center">
        <template slot-scope="scope">
          <el-button type="primary" @click="handleCreate(scope.row.id)">新增子级</el-button>
          <el-button type="published" @click="handleUpdate(scope.row)">编辑</el-button>
          <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </tree-table>

    <!-- 新增修改界面 -->
    <el-dialog :title="operation?'新增':'编辑'" :visible.sync="dialogFormVisible" :close-on-click-modal="false"
               width="50%">
      <el-form ref="dataForm" :model="dataForm" :rules="dataFormRules" label-width="120px" size="small"
               style="text-align:left;"
               @keyup.enter.native="saveFormData()">
        <el-form-item label="菜单类型" prop="type">
          <el-radio-group v-model="dataForm.type">
            <el-radio v-for="(type, index) in menuTypeList" :label="index" :key="index">{{
                type
              }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="menuTypeList[dataForm.type] + '名称'" prop="name">
          <el-input v-model="dataForm.name" :placeholder="menuTypeList[dataForm.type] + '名称'"/>
        </el-form-item>
        <el-form-item label="菜单编码" prop="code">
          <el-input v-model="dataForm.code" placeholder="菜单编码"/>
        </el-form-item>
        <el-form-item v-if="dataForm.type === 1" label="菜单路由(html)" prop="url">
          <el-input v-model="dataForm.pageUrl" placeholder="菜单路由(html)"/>
        </el-form-item>
        <!-- <el-form-item v-if="dataForm.type === 1" label="菜单路由(VUE)" prop="url">
            <el-input v-model="dataForm.remark" placeholder="菜单路由(VUE)"/>
        </el-form-item> -->
        <el-form-item v-if="dataForm.type === 1 " label="权限标识" prop="permission">
          <el-input v-model="dataForm.permission"
                    placeholder="如: sys:user:add, sys:user:edit, sys:user:delete"/>
        </el-form-item>
        <el-form-item v-if="dataForm.type !== 2" label="排序编号" prop="orderNo">
          <el-input-number v-model="dataForm.orderNo" :min="0"/>
        </el-form-item>
        <el-form-item v-if="dataForm.type !== 2" label="菜单图标" prop="icon">
          <select-icon v-model='dataForm.icon' :options='iconDataList'/>
        </el-form-item>
        <el-form-item label="是否展示" prop="showFlag">
          <el-switch v-model="dataForm.showFlag" :active-value="1" :inactive-value="0" label="是否展示"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="closeDialog()">取消</el-button>
            <el-button :loading="editLoading" size="small" type="primary" @click="saveFormData()">确定</el-button>
        </span>
    </el-dialog>

  </div>

</template>

<script>
/**
 Auth: chenyue1993
 Created: 2019/11/14-14:54
 */
import treeTable from '@/components/TreeTable'
import permission from '@/directive/permission/index.js' // 权限判断指令
import SelectIcon from './components/SelectIcon' // 权限判断指令
export default {
  name: 'SystemMenu',
  components: {treeTable, SelectIcon},
  data() {
    return {
      treeTableDataList: [],
      listLoading: true,
      expandAll: false, // 默认展开所有节点
      columns: [
        // { text: 'ID', value: 'id',  width: '300px',align:'center' },
        {text: '资源名称', value: 'name', align: 'left', width: '170px'},
        {
          text: '资源类型', value: 'type', align: 'center', tagFlag: true, width: '130px',
          tagFormatter: [
            {text: '导航目录', value: 0, type: ''},
            {text: '跳转菜单', value: 1, type: 'success'},
            {text: '页面按钮', value: 2, type: 'danger'}
          ]
        },
        {text: '资源编码', value: 'code', align: 'center', width: '140px'},
        {text: '跳转地址', value: 'pageUrl', align: 'left'},
        {text: '权限标识', value: 'permission', align: 'center', width: '150px'},
        {text: '图标', value: 'icon', align: 'center', width: '100px', iconFlag: true},
        {text: '是否展示', value: 'showFlag', align: 'center', width: '100px', switchFlag: true},
        {text: '排序', value: 'orderNo', align: 'center', width: '80px'}
      ],

      operation: true, // 默认标记新增
      dialogFormVisible: false,
      editLoading: false,
      menuTypeList: ['目录', '菜单', '按钮'],
      dataForm: {},
      dataFormRules: {
        name: [{required: true, message: '菜单名称不能为空', trigger: 'blur'}],
        code: [{required: true, message: '请输入资源编码', trigger: 'blur'}],
        type: [{required: true, message: '请选择资源类型', trigger: 'blur'}],
        orderNo: [{required: true, message: '请输入排序号码', trigger: 'blur'}]
      },
      iconDataList: [
        'icon-setting', 'icon-chayan', 'icon-ditu', 'icon-zujian',
        'icon-erweima', 'icon-yanzhengma', 'icon-biaoge', 'icon-tupian',
        'icon-jiaoyu', 'icon-gongju', 'icon-product', 'icon-dingdanshuliang',
        'icon-home', 'icon-baocun', 'icon-news', 'icon-platform',
        'icon-zhuceyonghu',
        'icon-bumen', 'icon-role', 'icon-log', 'icon-quanxian1', 'icon-tubiao-1',
        'icon-jifen', 'icon-miaosha', 'icon-pinpai', 'icon-pingjialiebiao',
        'icon-comlist', 'icon-shuxing', 'icon-fenlei1', 'icon-shangpinfenlei',
        'icon-tubiao-', 'icon-fenzu', 'icon-mianyunfei', 'icon-shangpin1',
        'icon-youhuiquan', 'icon-zhekouqia', 'icon-shangpinfenlei1', 'icon-huiyuanliebiao',
        'icon-navicon-dsrwpz', 'icon-moban', 'icon-yingxiao', 'icon-gudingshangpinliebiao',
        'icon-shangpinliebiao', 'icon-yingxiao1', 'icon-huiyuan', 'icon-shujuzidian',
        'icon-tuangou', 'icon-yunying2', 'icon-miaosha1', 'icon-moban1',
        'icon-lunbotu', 'icon-yunfei', 'icon-shuxing2', 'icon-dianpu1', 'icon-zhekou-4',
        'icon-zhekou1'
      ]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 改变展开收缩
    changeExpandState() {
      this.expandAll = !this.expandAll
      if (this.expandAll) {
        this.$refs.menuTree.expandAllRow();
      } else {
        this.$refs.menuTree.collapseAllRow();
      }
      this.$forceUpdate();
    },
    // 获取数据
    getList() {
      this.listLoading = true
      // 【API请求】---- 获取资源菜单树数据
      this.$api.getMenuTreeList(this.listQuery).then(response => {
        this.treeTableDataList = response.data
        this.listLoading = false;
      })
    },

    // 【按钮点击】--- 弹出新增表单
    handleCreate(pid) {
      this.operation = true
      this.initDataForm()
      if (pid) {
        this.dataForm.pid = pid
      }
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
        this.editLoading = false
      })
    },
    // 【按钮点击】--- 弹出编辑表单
    handleUpdate(row) {
      this.operation = false
      this.dataForm = {
        id: row.id,
        pid: row.pid,
        name: row.name,
        code: row.code,
        pageUrl: row.pageUrl,
        remark: row.remark,
        type: row.type,
        showFlag: row.showFlag,
        orderNo: row.orderNo,
        icon: row.icon,
        permission: row.permission
      },

          this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
        this.editLoading = false
      })
    },
    // 保存表单数据
    saveFormData() {
      this.$refs['dataForm'].validate((valid) => {
        if (!valid) {
          return false
        }
        this.editLoading = true
        // 【API请求】----保存表单数据
        this.$api.saveMenuInfo(this.dataForm).then(() => {
          this.editLoading = false// 关闭loading框
          this.dialogFormVisible = false// 关闭表单页面
          this.getList()// 重新获取表格数据
          this.initDataForm()
          this.$notify({title: '成功', message: '保存成功', type: 'success', duration: 2000})
        })
      })
    },
    // 【按钮点击】---删除行
    handleDelete(row) {
      this.$confirm('确认删除该记录吗？', '提示', {}).then(() => {
        // 【API请求】---- 删除一行数据
        this.$api.deleteMenu({ids: row.id}).then(() => {
          this.$message({message: '操作成功', type: 'success'})
          if (row.children.length > 0) {
            for (let i = 0; i < row.children.length; i++) {
              this.$api.deleteMenu({ids: row.children[i].id}).then(() => {
                this.$message({message: '子级删除操作成功', type: 'success'})
              })
            }
          }
          this.getList()
        })
      }).catch(() => {

      })
    },
    // 关闭表单弹出框
    closeDialog() {
      // this.$refs['dataForm'].resetFields();
      this.initDataForm()
      this.dialogFormVisible = false
    },
    // 初始化表单数据
    initDataForm() {
      this.dataForm = {
        id: '',
        pid: '',
        name: '',
        code: '',
        pageUrl: '',
        type: 1,
        showFlag: 1,
        icon: '',
        orderNo: 0
      }
    }

  }

}
</script>
